<template>
  <div>
    <!-- 表格详情 -->
    <div v-if="model === 1">
      <div class="expand-view">
        <el-card shadow="always">
          <el-row :gutter="10">
            <el-col :span="currentRow.dangerLevel === 0 ? 12:6">
              <p class="info-title" style="color: #8c939d;">
                第{{currentRow.count}}次，{{currentRow.investigateTypeName}}
                <el-tag effect="plain" :type="currentRow.checkStatusName | gradeCheckColor" size="mini">{{
                  formatCheckStatus(currentRow.checkStatusName,currentRow.overStatus) }}
                </el-tag>
              </p>
              <p class="info-title">
                隐患类型:<span class="info">{{ currentRow.damageTypeName}}隐患</span>
              </p>
              <p class="info-title">
                隐患等级:
                <el-tag size="mini" :style="currentRow.dangerLevelName | gradeDangerColor" class="s-white">
                  {{currentRow.dangerLevelName}}
                </el-tag>
              </p>
              <p class="info-title">
                排查单位:<span class="info">{{ currentRow.unitName}}</span>
              </p>
              <p class="info-title">
                排查人:<span class="info">{{ currentRow.userName}}</span>
              </p>
              <p class="info-title">
                排查时间:<span class="info">{{currentRow.investigateTime | formatTimer}}</span>
              </p>
              <div v-if="currentRow.checkStatus !== 0">
                <p class="info-title">
                  复核单位:<span class="info">{{ currentRow.checkUnitName  }}</span>
                </p>
                <p class="info-title">
                  复核人:<span class="info">{{ currentRow.checkUserName }}</span>
                </p>
                <p class="info-title">
                  复核时间:<span class="info">{{currentRow.checkTime | formatTimer}}</span>
                </p>
                <div v-if="currentRow.checkStatus === 3 || currentRow.checkStatus === 4">
                  <p class="info-title">
                    整改建议:<span class="info">{{ currentRow.advice}}</span>
                  </p>
                  <p class="info-title">
                    整改截止日期:<span class="info">{{ currentRow.rectificationTime | formatTimer2 }}</span>
                  </p>
                </div>
                <p class="info-title" v-else>
                  复核结论:<span class="info">{{ currentRow.reason}}</span>
                </p>
              </div>
              <div v-if="currentRow.checkStatus === 7">
                <span class="info-title">整改文件：</span>
                <div v-for="(item,index) in fileList2" :key="index"
                     style="text-align: center;display: inline-block;margin-left: 20px;font-size: 5px">
                  <a :download="item.name" :href="item.url" style="color:black">
                    <i class="iconfont iconPDF" style="font-size: 30px;color:red"></i>
                    <br/>
                    {{item.name}}
                  </a>
                </div>
              </div>
            </el-col>
            <el-col :span="12" v-if="currentRow.dangerLevel !== 0">
              <p class="info-title">
                排查情况
              </p>
              <div class="detail-children">
                <div class="detail-children-info ">
                  <el-tabs value="灾害历史特征">
                    <el-tab-pane name="灾害历史特征" label="灾害历史特征">
                      <div class="children-tabs">
                        <div v-if="showCollapseTab(1)">
                          <damage-detail damageType="崩塌" :data="currentRow"/>
                        </div>
                        <div v-if="showCollapseTab(2)">
                          <damage-detail damageType="滑坡" :data="currentRow"/>
                        </div>
                        <div v-if="showCollapseTab(3)">
                          <damage-detail damageType="泥石流" :data="currentRow"/>
                        </div>
                        <div v-if="showCollapseTab(4)">
                          <damage-detail damageType="沉陷与塌陷" :data="currentRow"/>
                        </div>
                        <div v-if="showCollapseTab(5)">
                          <damage-detail damageType="水毁" :data="currentRow"/>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane name="灾害现状" label="灾害现状">
                      <div class="children-tabs">
                        <el-tabs v-model="roadEffectActiveName" tab-position="left">
                          <el-tab-pane name="1" label="路基路面" v-if="showRoadEffectTab(1)">
                            <road-detail influenceType="路基路面" :currentRow="currentRow"  />
                          </el-tab-pane>
                          <el-tab-pane name="2" label="坡面防护" v-if="showRoadEffectTab(2)">
                            <road-detail influenceType="坡面防护" :currentRow="currentRow" />
                          </el-tab-pane>
                          <el-tab-pane name="3" label="沿河防护" v-if="showRoadEffectTab(3)">
                            <road-detail influenceType="沿河防护" :currentRow="currentRow" />
                          </el-tab-pane>
                          <el-tab-pane name="4" label="支挡设施" v-if="showRoadEffectTab(4)">
                            <road-detail influenceType="支挡设施" :currentRow="currentRow" />
                          </el-tab-pane>
                          <el-tab-pane name="5" label="桥梁涵洞" v-if="showRoadEffectTab(5)">
                            <road-detail influenceType="桥梁涵洞" :currentRow="currentRow"/>
                          </el-tab-pane>
                          <el-tab-pane name="6" label="隧道" v-if="showRoadEffectTab(6)">
                            <road-detail influenceType="隧道" :currentRow="currentRow" />
                          </el-tab-pane>
                          <el-tab-pane name="7" label="排水设施" v-if="showRoadEffectTab(7)">
                            <road-detail influenceType="排水设施" :currentRow="currentRow" />
                          </el-tab-pane>
                          <el-tab-pane name="8" label="取/弃土场" v-if="showRoadEffectTab(8)">
                            <road-detail influenceType="取/弃土场" :currentRow="currentRow" />
                          </el-tab-pane>
                          <el-tab-pane name="9" label="施工便道" v-if="showRoadEffectTab(9)">
                            <road-detail influenceType="施工便道" :currentRow="currentRow"/>
                          </el-tab-pane>
                          <el-tab-pane name="10" label="临时驻地" v-if="showRoadEffectTab(10)">
                            <road-detail influenceType="临时驻地" :currentRow="currentRow"/>
                          </el-tab-pane>
                          <el-tab-pane name="11" label="周边建（构）筑物" v-if="showRoadEffectTab(11)">
                            <road-detail influenceType="周边建筑物" :currentRow="currentRow"/>
                          </el-tab-pane>
                          <el-tab-pane name="12" label="周边住户" v-if="showRoadEffectTab(12)">
                            <road-detail influenceType="周边住户" :currentRow="currentRow"/>
                          </el-tab-pane>
                        </el-tabs>
                        <div style="margin-top:20px;margin-left: 20px"><span
                          style="font-size: 15px;font-weight: 600;color:#1990FE;margin-right: 10px">其他公路影响描述:</span>{{currentRow.roadEffect.remark}}
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane name="已采取措施" label="已采取措施">
                      <div class="measures-info">
                              <span v-for="item in currentRow.measuresTypeNameList" :key="item"
                                    style="display: inline-block;width: 120px">
                                  <i class="el-icon-s-help" style="margin-right: 10px;color:#00d600"></i>{{item}}
                              </span>
                      </div>
                      <div style="margin-top:20px;margin-left: 20px" v-if="currentRow.measuresRemark"><span
                        style="font-size: 15px;font-weight: 600;color:#1990FE;margin-right: 10px">其他措施描述:</span>{{currentRow.measuresRemark}}
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </el-col>
            <el-col :span="currentRow.dangerLevel === 0 ? 12:6">
              <p class="info-title">
                现场照片
              </p>
              <div v-if="currentRow.picList.length ===0" style="line-height: 100px;text-align: center">没有上传现场照片
              </div>

              <el-carousel v-else trigger="click" direction="vertical" :interval="5000">
                <el-carousel-item v-for="(item,index) in  currentRow.picList" :key="index">
                  <el-image style="height:100%;width:100%" @click="previewImg(index, currentRow.picList)"
                            :src="constUrl+item.url" fit="cover"></el-image>
                </el-carousel-item>
              </el-carousel>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>
    <div class="page_monitor-add2" v-if="model === 2">
      <!--  复核详情  -->
      <div class="expand-view">
        <el-card shadow="always">
          <el-row>
            <p class="info-title" style="color: #8c939d;">
              第{{currentRow.count}}次，{{currentRow.investigateTypeName}}
              <span class="info"><el-tag effect="plain" :type="currentRow.checkStatusName | gradeCheckColor"
                                         size="mini">{{ currentRow.checkStatusName }}</el-tag></span>
            </p>
            <el-col :span="12">
              <p class="info-title">
                隐患点名称:<span class="info">{{currentRow.damageName}}</span>
              </p>
              <p class="info-title">
                行政区:<span class="info">{{ currentRow.regionName}}</span>
              </p>
              <p class="info-title">
                路线名称:<span class="info">{{ currentRow.roadName}}</span>
              </p>
              <p class="info-title">
                排查类型:<span class="info">{{currentRow.investigateTypeName}}</span>
              </p>
              <p class="info-title">
                排查人:<span class="info">{{ currentRow.userName}}</span>
              </p>
              <p class="info-title" v-if="isLook">
                复核单位:<span class="info">{{ currentRow.checkUnitName }}</span>
              </p>
              <p class="info-title" v-if="isLook">
                复核时间:<span class="info">{{currentRow.checkTime | formatTimer}}</span>
              </p>
              <p class="info-title" v-if="isLook">
                整改建议:<span class="info">{{ currentRow.advice}}</span>
              </p>
            </el-col>
            <el-col :span="12">
              <p class="info-title">
                隐患等级:<span class="info2" :style="currentRow.dangerLevelName | gradeDangerColor">{{ currentRow.dangerLevelName }}</span>
              </p>
              <p class="info-title">
                起止桩号:<span class="info">{{ currentRow.startPointStakeNum}}~{{ currentRow.endPointStakeNum}}</span>
              </p>
              <p class="info-title">
                标段名称:<span class="info">{{ currentRow.roadSectionName}}</span>
              </p>
              <p class="info-title">
                排查单位:<span class="info">{{ currentRow.unitName}}</span>
              </p>
              <p class="info-title">
                排查时间:<span class="info">{{currentRow.investigateTime | formatTimer}}</span>
              </p>
              <p class="info-title" v-if="isLook">
                复核人:<span class="info">{{ currentRow.checkUserName}}</span>
              </p>
              <p class="info-title" v-if="isLook">
                复核结论:<span class="info">{{ currentRow.evaluate }}</span>
              </p>

            </el-col>
          </el-row>
        </el-card>
        <el-card shadow="always">
          <p class="info-title">
            排查情况
          </p>
          <div class="detail-children">
            <div class="detail-children-info ">
              <el-tabs value="灾害历史特征">
                <el-tab-pane name="灾害历史特征" label="灾害历史特征">
                  <div class="children-tabs">
                    <div v-if="showCollapseTab(1)">
                      <damage-detail damageType="崩塌" :data="currentRow"/>
                    </div>
                    <div v-if="showCollapseTab(2)">
                      <damage-detail damageType="滑坡" :data="currentRow"/>
                    </div>
                    <div v-if="showCollapseTab(3)">
                      <damage-detail damageType="泥石流" :data="currentRow"/>
                    </div>
                    <div v-if="showCollapseTab(4)">
                      <damage-detail damageType="沉陷与塌陷" :data="currentRow"/>
                    </div>
                    <div v-if="showCollapseTab(5)">
                      <damage-detail damageType="水毁" :data="currentRow"/>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane name="灾害现状" label="灾害现状">
                  <div class="children-tabs">
                    <el-tabs v-model="roadEffectActiveName" tab-position="left">
                      <el-tab-pane name="1" label="路基路面" v-if="showRoadEffectTab(1)">
                        <road-detail influenceType="路基路面" :currentRow="currentRow"  />
                      </el-tab-pane>
                      <el-tab-pane name="2" label="坡面防护" v-if="showRoadEffectTab(2)">
                        <road-detail influenceType="坡面防护" :currentRow="currentRow" />
                      </el-tab-pane>
                      <el-tab-pane name="3" label="沿河防护" v-if="showRoadEffectTab(3)">
                        <road-detail influenceType="沿河防护" :currentRow="currentRow" />
                      </el-tab-pane>
                      <el-tab-pane name="4" label="支挡设施" v-if="showRoadEffectTab(4)">
                        <road-detail influenceType="支挡设施" :currentRow="currentRow" />
                      </el-tab-pane>
                      <el-tab-pane name="5" label="桥梁涵洞" v-if="showRoadEffectTab(5)">
                        <road-detail influenceType="桥梁涵洞" :currentRow="currentRow"/>
                      </el-tab-pane>
                      <el-tab-pane name="6" label="隧道" v-if="showRoadEffectTab(6)">
                        <road-detail influenceType="隧道" :currentRow="currentRow" />
                      </el-tab-pane>
                      <el-tab-pane name="7" label="排水设施" v-if="showRoadEffectTab(7)">
                        <road-detail influenceType="排水设施" :currentRow="currentRow" />
                      </el-tab-pane>
                      <el-tab-pane name="8" label="取/弃土场" v-if="showRoadEffectTab(8)">
                        <road-detail influenceType="取/弃土场" :currentRow="currentRow" />
                      </el-tab-pane>
                      <el-tab-pane name="9" label="施工便道" v-if="showRoadEffectTab(9)">
                        <road-detail influenceType="施工便道" :currentRow="currentRow"/>
                      </el-tab-pane>
                      <el-tab-pane name="10" label="临时驻地" v-if="showRoadEffectTab(10)">
                        <road-detail influenceType="临时驻地" :currentRow="currentRow"/>
                      </el-tab-pane>
                      <el-tab-pane name="11" label="周边建（构）筑物" v-if="showRoadEffectTab(11)">
                        <road-detail influenceType="周边建筑物" :currentRow="currentRow"/>
                      </el-tab-pane>
                      <el-tab-pane name="12" label="周边住户" v-if="showRoadEffectTab(12)">
                        <road-detail influenceType="周边住户" :currentRow="currentRow"/>
                      </el-tab-pane>
                    </el-tabs>
                    <div style="margin-top:20px;margin-left: 20px"><span
                      style="font-size: 15px;font-weight: 600;color:#1990FE;margin-right: 10px">其他公路影响描述:</span>{{currentRow.roadEffect.remark}}
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane name="已采取措施" label="已采取措施">
                  <div class="measures-info">
                              <span v-for="item in currentRow.measuresTypeNameList" :key="item"
                                    style="display: inline-block;margin-left: 20px">
                                  <i class="el-icon-s-help" style="margin-right: 10px;color:#00d600"></i>{{item}}
                              </span>
                  </div>
                  <div style="margin-top:20px;margin-left: 20px" v-if="currentRow.measuresRemark"><span
                    style="font-size: 15px;font-weight: 600;color:#1990FE;margin-right: 10px">其他措施描述:</span>{{currentRow.measuresRemark}}
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </el-card>
        <el-card shadow="always">
          <p class="info-title">
            现场照片
          </p>
          <div v-if="currentRow.picList.length ===0" style="line-height: 100px;text-align: center">没有上传现场照片
          </div>
          <el-carousel v-else trigger="click" direction="vertical" :interval="5000">
            <el-carousel-item v-for="(item,index) in  currentRow.picList" :key="index">
              <el-image style="height:100%;width:100%" @click="previewImg(index, currentRow.picList)"
                        :src="constUrl+item.url" fit="cover"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </div>
      <picture-viewer ref="imageViewer"></picture-viewer>
    </div>
    <picture-viewer ref="imageViewer"></picture-viewer>
  </div>
</template>
<script>
import constUrl from '@/services/env'
import PictureViewer from '@/components/picture-viewer/index-name';
import DamageDetail from "./table-damage-detail";
import RoadDetail from "./table-road-detail";
import ItemMixins from "./item.mixins";

export default {
  components: {
    PictureViewer,
    DamageDetail,
    RoadDetail,
  },
  mixins: [ItemMixins],
  props: ['value', 'currentRow', 'model', 'isLook'],
  data() {
    return {
      constUrl,
      roadEffectActiveName: '',
    }
  },
  methods: {
    // 查看大图
    previewImg(index, urls) {
      const urlList = JSON.parse(JSON.stringify(urls))
      urlList.map(x => {
        x.url = this.constUrl + x.url
        return x
      })
      this.$refs.imageViewer.showViewer(urlList, index)
    },
    //根据所选的灾害类型，展示不同的填写表单
    showCollapseTab(val) {
      return this.currentRow.damageType === val
    },
    //根据所选的影响公路情况，展示不同的填写表单
    showRoadEffectTab(val) {
      return this.currentRow.roadEffectTypeList.indexOf(val) > -1
    },
  },
  mounted() {
    this.roadEffectActiveName = this.currentRow.roadEffectTypeList[0] + ''
  },
  activated() {
  },
  created() {
  },
  computed: {
    fileList2() {
      return this.filePathHandle(this.currentRow.rectificationFileList)
    },
  },
}
</script>

<style lang="less">
  .children-tabs{
    font-size: 20px;
  }
  .measures-info{
    font-size: 20px;
  }
  .page_monitor-add2 {
    width: 710px;
    margin: 0 auto;

    .page-title {
      margin-bottom: 50px;
      padding: 28px;
      font-size: 30px;
      line-height: 18px;
      text-align: center;
      color: white;
      font-weight: 600;
      background-color: #1990FE;
      border-radius: 20px;
    }
  }

  .expand-view {
    .el-card {
      margin-bottom: 20px;
    }

    .damage-info {
      font-size: 15px;
      margin-left: 10px;
      line-height: 30px;
    }

    .el-card__body {
      padding: 20px;
    }

    .el-tabs__item {
      font-size: 20px;
      font-weight: 600;
    }

    .info-title {
      font-size: 18px;
      color: #1990FE;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .info {
      font-size: 15px;
      margin-left: 20px;
      color: #8c939d;
    }

    .info2 {
      border-radius: 5px;
      padding: 5px 10px;
      font-size: 15px;
      margin-left: 20px;
      color: #fff;
    }
  }

  .detail-children {
    border: none !important;
    padding: 0px !important;

  }
</style>
